<template>
    <el-dialog
        v-if="Fields"
        v-model="dialogVisible"
        title="打印"
        :width="increaseWidth?'1189px':'889px'"
        :close-on-click-modal="false"
    >
        <el-row>
            <el-col :span="increaseWidth?18:24">
                <div>
                    <div style="padding: 7px;margin-top: 1px; border-bottom: 1px solid #c8c8c85e;">
                        <el-button size="small" type="primary" @click="printEvent1">打印</el-button>
                        <el-button size="small" type="warning" @click="printSettings">打印设置</el-button>
                        <el-button size="small" v-if="increaseWidth" type="success" @click="saveSettings">保存设置</el-button>
                    </div>
                </div>
                <div id="printMe" style="height: 1000px">
                    <div class="prints" :style="Fields.base.style" style="border: 1px solid;">
                        <div class="print_top" v-if="Fields.base.isHead">
                            <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;overflow: hidden;">
                                
                                <div v-for="(item,index) in  Fields['header']"
                                    :style="{float: 'left',height: Fields.base.height+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                    :key="index">
                                    <div v-if="item.type=='text'">
                                        <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                            {{ item.title ? item.title + ' :' : '' }}{{ ft(item) }}
                                        </span>
                                    </div>
                                    <div v-else-if="item.type=='customize'">
                                        <div :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px',padding:XEUtils.toValueString(item.style.padding)?item.style.padding:'',textAlign:XEUtils.toValueString(item.style.textAlign)?item.style.textAlign:''}">
                                            {{ item.text }}
                                        </div>
                                    </div>
                                    <div v-if="(item.type==='image'||item.type==='code')">
                                        <img :style="item['style']===''?{}:item['style']" alt :src="item.text" v-if="(item.type=='image')"/>
                                        <sxmbarcode
                                            :style="item.style==='' ? '' : item.style"
                                            v-if="(item.type==='code')"
                                            :value="ft(item)"
                                            :format="item.format"
                                            :height="item.height"
                                            :displayValue="item.displayValue"
                                        ></sxmbarcode>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <vxe-table v-if="(Fields.base.iscard==='1'&&Fields.base.isBody)"
                            :data="formData.table[Fields.base.tableNames]"
                            border="full"
                            size="small"
                        >
                            <vxe-column type="seq" width="50" v-if="Fields.base.showSeq" :resizable="increaseWidth"></vxe-column>
                            <vxe-column v-for="(item,index) in Fields['detail']" :field="item.fieldName" :key="index"
                              :width="'100'" :resizable="increaseWidth"
                              :title="item.title"
                              :header-align="'center'">
                              <template #header="{column}">
                                <span :style="{fontSize:Fields.base.fontSize+'px'}">
                                  {{column['title']}}
                                </span>
                              </template>
                               <template #default="{ row }">
                                    <span v-if="(item.type=='text')" :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                        {{row[item.fieldName]}}
                                    </span>
                                    <span v-else-if="(item.type=='date')" :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                        {{XEUtils.toDateString(row[item.fieldName])}}
                                    </span>
                                    <sxmbarcode
                                        style="margin-top: 1px;"
                                        :style="item.style==='' ? '' : item.style"
                                        v-else-if="(item.type==='code'&&row[item.fieldName])"
                                        :value="row[item.fieldName]"
                                        :format="item.format"
                                        :height="item.height"
                                        :displayValue="item.displayValue"
                                    ></sxmbarcode>
                              </template> 
                            </vxe-column>
                        </vxe-table>
                        <div class="cardsx" v-if="(Fields.base.iscard==='2'&&Fields.base.isBody)" style="margin-top: 10px">
                            <div v-for="v in formData.table[Fields.base.tableNames]" :key="i"
                            :style="{'page-break-after':fy(i)}">
                                <div class="box-card"
                                    :style="{'margin-top': '10px','display':' inline-block','width':Fields.base.cardGrid/24*100+'%','margin-right':jiangepanduan(i)}">
                                    <div style="border:1px solid rgb(122, 122, 122);overflow: hidden;border-radius: 2px;">
                                        <div v-for="(item,index) in Fields['detail']" :key="index" class="borderbotom"
                                            :style="{float: 'left',width:item.span/24*100+'%','height':item.heighty?Fields.base.height*item.heighty+'px':Fields.base.height+'px','line-height':Fields.base.height+'px'}">
                                            <span v-if="((item.type!=='code')&&item.type!='image')&&Fields.detail[index]['direction']===0"
                                                :style="{'padding':' 5px','box-sizing':' border-box','display':item.style['fontSize']>Fields.base.fontSize?'block':'initial','line-height': 'initial','font-size':item.style['fontSize']+'px','line-height':(item.style['fontSize']>Fields.base.fontSize?item.style['fontSize']:Fields.base.height)+'px'}">
                                                {{item.title}}:{{v[item.fieldName]}}
                                            </span>
                                            <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                v-show="((item.type!=='code')&&item.type!='image'&&Fields.detail[index]['direction']===1)">
                                                <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                    style="border-bottom:1px solid #000;padding:0 5px;box-sizing: border-box;">
                                                {{ item.title }}
                                                </div>
                                                <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                    style="padding:0 5px;box-sizing: border-box;">
                                                {{ v[item.fieldName] }}
                                                </div>
                                            </div>
                                            <sxmbarcode
                                                style="padding: 10px; text-align: center"
                                                :style="item.style==='' ? '' : item.style"
                                                v-if="(item.type==='code'&&v[item.fieldName])"
                                                :value="v[item.fieldName]"
                                                :format="item.format"
                                                :height="item.height"
                                                :displayValue="item.displayValue"
                                            ></sxmbarcode>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="print_top" v-if="Fields.base.isFooter" style="margin-top: 10px">
                            <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;overflow: hidden;">
                                
                                <div v-for="(item,index) in  Fields['isFooter']"
                                    :style="{float: 'left',height: Fields.base.height+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                    :key="index">
                                    <div v-if="item.type=='text'">
                                        <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                            {{ item.title ? item.title + ' :' : '' }}{{ ft(item) }}
                                        </span>
                                    </div>
                                    <div v-else-if="item.type=='customize'">
                                        <div :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px',padding:XEUtils.toValueString(item.style.padding)?item.style.padding:'',textAlign:XEUtils.toValueString(item.style.textAlign)?item.style.textAlign:''}">
                                            {{ item.text }}
                                        </div>
                                    </div>
                                    <div v-if="(item.type==='image'||item.type==='code')">
                                        <img :style="item['style']===''?{}:item['style']" alt :src="item.text" v-if="(item.type=='image')"/>
                                        <sxmbarcode
                                            :style="item.style==='' ? '' : item.style"
                                            v-if="(item.type==='code')"
                                            :value="ft(item)"
                                            :format="item.format"
                                            :height="item.height"
                                            :displayValue="item.displayValue"
                                        ></sxmbarcode>
                                    </div>
                                    <div v-else :style="item['style']===''?{}:item['style']">
                                        <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                         {{ item.title!=='' ? item.title + ' :' : '' }}{{ ft(item) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="increaseWidth?6:0">
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="基础" name="first">
                        <el-form size="small">
                            <el-form-item label="明细表名">
                                <el-select v-model="Fields.base.tableNames" class="m-2" placeholder="请选择" size="small">
                                    <el-option
                                        v-for="items in DetailTables"
                                        :key="items.value"
                                        :label="items.name"
                                        :value="items.value"
                                    />
                                  </el-select>
                            </el-form-item>
                            <el-form-item label="边距">
                                <span style="margin:0 10px;">上</span>
                                <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingTop"
                                          placeholder="单位PX"></el-input>
                                <span style="margin:0 10px;">左</span>
                                <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingLeft"
                                          placeholder="单位PX"></el-input>
                                <span style="margin:0 10px;">下</span>
                                <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingBottom"
                                          placeholder="单位PX"></el-input>
                                <span style="margin:0 10px;">右</span>
                                <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingRight"
                                          placeholder="单位PX"></el-input>
                            </el-form-item>
                            <el-radio-group v-model="Fields.base.iscard" class="ml-4">
                                <el-radio label="1" size="large">表格模式</el-radio>
                                <el-radio label="2" size="large">卡片模式</el-radio>
                            </el-radio-group>
                            <el-form-item label="强制分页" v-if="Fields.base.iscard==='2'">
                                <el-select v-model="Fields.base.fy" size="small" class="m-2">
                                  <el-option label="否" :value="0"></el-option>
                                  <el-option label="1" :value="1"></el-option>
                                  <el-option label="2" :value="2"></el-option>
                                  <el-option label="4" :value="4"></el-option>
                                  <el-option label="6" :value="6"></el-option>
                                  <el-option label="8" :value="8"></el-option>
                                  <el-option label="10" :value="10"></el-option>
                                  <el-option label="12" :value="12"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="字号">
                                <el-input-number placeholder="请输入" v-model="Fields.base.fontSize" size="small"></el-input-number>
                            </el-form-item>
                            <el-form-item label="行高">
                                <el-input-number  placeholder="请输入" v-model="Fields.base.height" size="small"></el-input-number >
                            </el-form-item>
                            <el-form-item label="页宽">
                                <el-input-number placeholder="请输入" v-model="Fields.base.pageSize" size="small"></el-input-number>
                            </el-form-item>
                            <el-form-item label="卡片栅格" v-if="Fields.base.iscard==='2'">
                                <el-input-number v-model="Fields.base.cardGrid" size="small" :min="1" :max="24"/>
                              </el-form-item>
                              <el-form-item label="卡片间隔" v-if="Fields.base.iscard==='2'">
                                <el-input-number v-model="Fields.base.cardInterval" size="small" :min="0"/>
                              </el-form-item>
                              <el-form-item label="打印确认">
                                <el-checkbox v-model="Fields.base.isHead" label="表头" size="large"/>
                                <el-checkbox v-model="Fields.base.isBody" label="表体" size="large"/>
                                <el-checkbox v-model="Fields.base.isFooter" label="表尾" size="large"/>
                              </el-form-item>
                              <el-form-item label="表体选项" v-if="Fields.base.isBody">
                                <el-checkbox v-model="Fields.base.showSeq" label="显示序号" size="large"/>
                              </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="表头" name="second">
                        <div style="margin-bottom: 10px;">
                            <el-button size="small" @click="insertEvent">新增</el-button>
                            <el-button size="small" @click="removeEvent">删除</el-button>
                            <el-button size="small" @click="moveUp">上移</el-button>
                            <el-button size="small" @click="moveDown">下移</el-button>
                        </div>
                        <el-table :data="Fields.header" size="small" border height="250" highlight-current-row @row-click="handle" style="width: 100%;" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="type" label="类型">
                                <template #default="{row}">
                                    <div>
                                        {{tableFt(row)}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="text" label="值">
                                <template #default="{row}">
                                    <div>
                                        {{ft(row)}}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-form v-if="highlight" size="small" style="margin-top: 10px;">
                            <el-form-item label="类型">
                                <el-select v-model="highlight.type" class="m-2" @change="()=>{highlight['span']=24}" placeholder="请选择">
                                    <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="条码类型" v-if="highlight.type==='code'">
                                <el-select v-model="highlight.format" class="m-2">
                                  <el-option label="CODE128" value="CODE128"></el-option>
                                  <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                  <el-option label="CODE39" value="CODE39"></el-option>
                                  <el-option label="MSI" value="MSI"></el-option>
                                  <el-option label="二维码" value="二维码"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="值" v-if="highlight.type!=='code'">
                                <el-input v-if="highlight.type=='customize'" v-model="highlight.text"/>
                                <el-select v-if="highlight.type!='customize'" v-model="highlight.fieldName" class="m-2">
                                    <el-option  v-for="elm in mainList" :label="elm.name" :value="elm.value" @click="mainTop(elm)"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="边距" v-if="highlight.type=='customize'">
                                <el-input v-model="highlight['style'].padding" placeholder="事例：0px 2px 3px 4px"></el-input>
                            </el-form-item>
                            <el-form-item label="位置" v-if="highlight.type==='customize'">
                                <el-select v-model="highlight['style'].textAlign" class="m-2">
                                    <el-option label="左" value="left"></el-option>
                                    <el-option label="中" value="center"></el-option>
                                    <el-option label="右" value="right"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="字号" v-if="highlight.type!='code'">
                                <el-input v-model="highlight['style'].fontSize" placeholder="单位（px）"></el-input>
                            </el-form-item>
                            <el-form-item label="条码大小" v-if="highlight.type==='code'">
                                <el-input-number
                                    v-model="highlight.height"
                                    :min="20"
                                    controls-position="right"
                                    size="small"
                                />
                              </el-form-item>
                            <el-form-item label="栅格">
                                <el-input-number
                                    v-model="highlight.span"
                                    :min="0"
                                    :max="24"
                                    controls-position="right"
                                    size="small"
                                />
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="表体" name="third">
                        <div style="margin-bottom: 10px;">
                            <el-button size="small" @click="detailInsertEvent">新增</el-button>
                            <el-button size="small" @click="detailRemoveEvent">删除</el-button>
                            <el-button size="small" @click="detailMoveUp">上移</el-button>
                            <el-button size="small" @click="detailMoveDown">下移</el-button>
                        </div>
                        <el-table :data="Fields.detail" size="small" border height="250" highlight-current-row @row-click="detailRow" style="width: 100%;" @selection-change="detailSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="type" label="类型">
                                <template #default="{row}">
                                    <div>
                                        {{tableFt(row)}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="text" label="值">
                                <template #default="{row}">
                                    <div>
                                        {{fts(row)}}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-form v-if="detailHighlight" size="small" style="margin-top: 10px;">
                            <el-form-item label="类型">
                                <el-select v-model="detailHighlight.type" class="m-2" placeholder="请选择">
                                    <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="条码类型" v-if="detailHighlight.type==='code'">
                                <el-select v-model="detailHighlight.format" class="m-2">
                                  <el-option label="CODE128" value="CODE128"></el-option>
                                  <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                  <el-option label="CODE39" value="CODE39"></el-option>
                                  <el-option label="MSI" value="MSI"></el-option>
                                  <el-option label="二维码" value="二维码"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="值">
                                <el-input v-if="detailHighlight.type=='customize'" v-model="detailHighlight.text"/>
                                <el-select v-if="detailHighlight.type!='customize'" v-model="detailHighlight.fieldName" class="m-2">
                                    <el-option  v-for="elm in DetailTables[Fields.base.tableNames].column" :label="elm.name" :value="elm.value" @click="detailTop(elm)"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="detailHighlight.type!=='code'" label="字号">
                                <el-input placeholder="请输入" v-model="detailHighlight.style['fontSize']" size="small"></el-input>
                            </el-form-item>
                            <el-form-item v-if="detailHighlight.type=='code'" label="字号">
                                <el-input-number placeholder="请输入" v-model="detailHighlight.height" size="small"></el-input-number>
                            </el-form-item>
                            <el-form-item label="高" v-show="Fields.base.iscard==='2'">
                                <el-input-number
                                    v-model="detailHighlight.heighty"
                                    :min="1"
                                    :max="140"
                                    controls-position="right"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="宽" v-show="Fields.base.iscard==='1'">
                                <el-input v-model="detailHighlight.width" controls-position="right" size="small"/>
                            </el-form-item>
                            <el-form-item label="方向">
                                <el-select class="m-2" v-model="detailHighlight.direction" placeholder="方向" size="small">
                                  <el-option
                                      label="左右"
                                      :value="0"
                                  />
                                  <el-option
                                      label="上下"
                                      :value="1"
                                  />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="表尾" name="fourth">
                        <div style="margin-bottom: 10px;">
                            <el-button size="small" @click="isFooterinsertEvent">新增</el-button>
                            <el-button size="small" @click="isFooterremoveEvent">删除</el-button>
                            <el-button size="small" @click="isFootermoveUp">上移</el-button>
                            <el-button size="small" @click="isFootermoveDown">下移</el-button>
                        </div>
                        <el-table :data="Fields.isFooter" size="small" border height="250" highlight-current-row @row-click="isFooterRow" style="width: 100%;" @selection-change="isFooterSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="type" label="类型">
                                <template #default="{row}">
                                    <div>
                                        {{tableFt(row)}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="text" label="值">
                                <template #default="{row}">
                                    <div>
                                        {{ft(row)}}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-form v-if="isFooterhighlight" size="small" style="margin-top: 10px;">
                            <el-form-item label="类型">
                                <el-select v-model="isFooterhighlight.type" class="m-2" @change="()=>{isFooterhighlight['span']=24}" placeholder="请选择">
                                    <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="条码类型" v-if="isFooterhighlight.type==='code'">
                                <el-select v-model="isFooterhighlight.format" class="m-2">
                                  <el-option label="CODE128" value="CODE128"></el-option>
                                  <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                  <el-option label="CODE39" value="CODE39"></el-option>
                                  <el-option label="MSI" value="MSI"></el-option>
                                  <el-option label="二维码" value="二维码"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="值" v-if="isFooterhighlight.type!=='code'">
                                <el-input v-if="isFooterhighlight.type=='customize'" v-model="isFooterhighlight.text"/>
                                <el-select v-if="isFooterhighlight.type!='customize'" v-model="isFooterhighlight.fieldName" class="m-2">
                                    <el-option  v-for="elm in mainList" :label="elm.name" :value="elm.value" @click="isFooterTop(elm)"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="边距" v-if="isFooterhighlight.type=='customize'">
                                <el-input v-model="isFooterhighlight['style'].padding" placeholder="事例：0px 2px 3px 4px"></el-input>
                            </el-form-item>
                            <el-form-item label="位置" v-if="isFooterhighlight.type==='customize'">
                                <el-select v-model="isFooterhighlight['style'].textAlign" class="m-2">
                                    <el-option label="左" value="left"></el-option>
                                    <el-option label="中" value="center"></el-option>
                                    <el-option label="右" value="right"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="字号" v-if="isFooterhighlight.type!='code'">
                                <el-input v-model="isFooterhighlight['style'].fontSize" placeholder="单位（px）"></el-input>
                            </el-form-item>
                            <el-form-item label="条码大小" v-if="isFooterhighlight.type==='code'">
                                <el-input-number
                                    v-model="isFooterhighlight.height"
                                    :min="20"
                                    controls-position="right"
                                    size="small"
                                />
                              </el-form-item>
                            <el-form-item label="栅格">
                                <el-input-number
                                    v-model="isFooterhighlight.span"
                                    :min="0"
                                    :max="24"
                                    controls-position="right"
                                    size="small"
                                />
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <div style="display:none">
            <vxe-table ref="print"></vxe-table>
        </div>
    </el-dialog>
</template>
<script>
    import {nextTick, reactive, ref, toRefs, watch,onMounted} from "vue"
    import XEUtils from 'xe-utils'
    import {editPrint, getPrinData} from "/@/api/linkoo/print";
    import {Plus} from '@element-plus/icons-vue'
    import Sortable from "sortablejs";
    import {ElMessage} from 'element-plus'
    export default {
        name: "print",
        setup(props, ctx){
            let print = ref(null)
            let state = reactive({
                typeList:[{name:"图片",value:"image"},{name:"自定义文本",value:"customize"},{name:"文本",value:"text"},{name:"条码",value:"code"},{name:"日期",value:"date"}],//类型汇总
                dialogVisible:false,
                increaseWidth:false,
                Fields:[],
                activeName:"first",
                formData:{},
                DetailTables: {},
                mainList:[],
                handleSelectionChangeData:[],//表头多选 选中
                highlight:null,// 表头高亮
                detailSelectionChangeData:[],//表体多选 选中
                detailHighlight:null,// 表体高亮
                isFooterSelectionChangeData:[],
                isFooterhighlight:null,
                printData:null
            })
            const Load=(type,{printData, rid, Combo, data,model })=>{
                state.dialogVisible=true
                state.printData=printData
                state.Fields = JSON.parse(printData.content)
                state.mainList = data.formData.mainList
                XEUtils.arrayEach(data.formData.tableList, field => {
                    state.DetailTables[field.value]=field
                })
                state.formData=model
            }
            const printSettings = () => {
                state.increaseWidth = !state.increaseWidth
            }
            const fts = (item)=>{
                let str;
                if(item.type=='text'){
                    str=item.title
                }else if(item.type=='customize'){
                    str=item.text
                }
                return str
            }
            const ft = (item)=>{
                
                let str;
                if(item.type=='text'){
                    str=state.formData[item.fieldName]
                    console.log(item,state.formData[item.fieldName],state.formData);
                }else if(item.type=='customize'){
                    str=item.text
                }
                return str
            }
            const jiangepanduan = (i) => {
                if (state.Fields.base.cardInterval === 0) {
                    return
                } else if (XEUtils.arrayLastIndexOf([1, 2, 3, 4, 6, 8, 12, 24], 24 / state.Fields.base.cardInterval) === i) {
                    return 0 + 'px'
                } else {
                    return state.Fields.base.cardInterval + 'px'
                }
            }
            // 表头新增
            const insertEvent = ()=>{
                state.Fields.header.unshift({type:"text",title:"",format:"",text:"",span:24,style:{fontSize:"24px"}})
                console.log(state.Fields.header);
            }
            // 表头删除
            const removeEvent = ()=>{
                state.handleSelectionChangeData.forEach(element => {
                    state.Fields.header.forEach((item,index)=>{
                        if(element==item){
                            state.Fields.header.splice(index,1)
                        }
                    })
                });
            }
            // 表头多选
            const handleSelectionChange = (val)=>{
                state.handleSelectionChangeData = val
            }
            // 表头当前行获取
            const handle = (val)=>{
                state.highlight = val
            }
            // 上下移动
            const moveUp = ()=>{
                let index ;
                state.Fields.header.forEach((item,sun)=>{
                    if(item==state.highlight){
                        console.log(sun);
                        index=sun
                    }
                })
                if(index==0){
                    return
                }
                let obj = state.Fields.header[index]
                state.Fields.header.splice(index-1,0,obj)
                state.Fields.header.splice(index+1,1)
            }
            const moveDown = ()=>{
                let index ;
                state.Fields.header.forEach((item,sun)=>{
                    if(item==state.highlight){
                        index=sun
                    }
                })
                if(index==state.Fields.header.length-1){
                    return
                }
                let obj = state.Fields.header[index]
                state.Fields.header.splice(index+2,0,obj)
                state.Fields.header.splice(index,1)
            }
            const tableFt = (row)=>{
                let obj ;
                state.typeList.forEach((item)=>{
                    if(item.value==row.type){
                        console.log(row);
                        obj = item.name
                    }
                })
                return obj
            }
            const mainTop = (item)=>{
                state.highlight.title=item.name
            }
            const detailTop = (item) =>{
                state.detailHighlight.title=item.name
            }
            const isFooterTop = (item)=>{
                state.isFooterhighlight.title=item.name
            }
            const isFooterRow =(item)=>{
                state.isFooterhighlight=item
            }
            const saveSettings = () => {
                state.printData.content = JSON.stringify(state.Fields)
                editPrint(state.printData).then((res) => {
                    ElMessage({
                    type: 'success',
                    message: "保存成功",
                    })
                })
            }
            // 表体新增{ "fieldName": "F397", "type": "text", "title": "文件类型", "text": "", "style": { "font-size": "12px" }, "span": "12", "_X_ROW_KEY": "row_292", "width": 85 }
            const detailInsertEvent = ()=>{
                state.Fields.detail.unshift({type:"text",title:"",width: 85,format:"",text:"",span:12,style:{fontSize:"24px"}})
                console.log(state.Fields.detail);
            }
            // 表体删除
            const detailRemoveEvent= ()=>{
                state.detailSelectionChangeData.forEach(element => {
                    state.Fields.detail.forEach((item,index)=>{
                        if(element==item){
                            state.Fields.detail.splice(index,1)
                        }
                    })
                });
            }
            // 表体多选
            const detailSelectionChange = (val)=>{
                state.detailSelectionChangeData=val
            }
            // 表体选中
            const detailRow = (val)=>{
                state.detailHighlight = val
            }
            // 上移
            const detailMoveUp = ()=>{
                let index ;
                state.Fields.detail.forEach((item,sun)=>{
                    if(item==state.detailHighlight){
                        console.log(sun);
                        index=sun
                    }
                })
                if(index==0){
                    return
                }
                let obj = state.Fields.detail[index]
                state.Fields.detail.splice(index-1,0,obj)
                state.Fields.detail.splice(index+1,1)
            }
            const detailMoveDown = ()=>{
                let index ;
                state.Fields.detail.forEach((item,sun)=>{
                    if(item==state.detailHighlight){
                        index=sun
                    }
                })
                if(index==state.Fields.detail.length-1){
                    return
                }
                let obj = state.Fields.detail[index]
                state.Fields.detail.splice(index+2,0,obj)
                state.Fields.detail.splice(index,1)
            }
            const fy = (i) => {
                return (state.Fields.base.fy > 0 && ((i + 1) % state.Fields.base.fy) === 0) ? 'always' : ''
            }
            // 表尾新增
            const isFooterinsertEvent = ()=>{
                if(!state.Fields['isFooter']){
                    state.Fields['isFooter']=[]
                }
                state.Fields.isFooter.unshift({type:"text",title:"",format:"",text:"",span:24,style:{fontSize:"24px"}})
            }
            // 表尾删除
            const isFooterremoveEvent = ()=>{
                state.isFooterSelectionChangeData.forEach(element => {
                    state.Fields.isFooter.forEach((item,index)=>{
                        if(element==item){
                            state.Fields.isFooter.splice(index,1)
                        }
                    })
                });
            }
            // 表尾上移
            const isFootermoveUp = ()=>{
                let index ;
                state.Fields.isFooter.forEach((item,sun)=>{
                    if(item==state.isFooterhighlight){
                        console.log(sun);
                        index=sun
                    }
                })
                if(index==0){
                    return
                }
                let obj = state.Fields.isFooter[index]
                state.Fields.isFooter.splice(index-1,0,obj)
                state.Fields.isFooter.splice(index+1,1)
            }
            // 表尾下移
            const isFootermoveDown = ()=>{
                let index ;
                state.Fields.isFooter.forEach((item,sun)=>{
                    if(item==state.isFooterhighlight){
                        index=sun
                    }
                })
                if(index==state.Fields.isFooter.length-1){
                    return
                }
                let obj = state.Fields.isFooter[index]
                state.Fields.isFooter.splice(index+2,0,obj)
                state.Fields.isFooter.splice(index,1)
            }
            const isFooterSelectionChange = (val)=>{
                state.isFooterSelectionChangeData = val
            }
            const printEvent1 = ()=>{
                const $table = print.value
                let contentHtml = document.getElementById('printMe').innerHTML
                const regex1 = /<div\sclass="vxe-table--empty-placeholder"\sstyle="top: \d+px; height: \d+px;"><div class="vxe-table--empty-content">暂无数据<\/div><\/div>/gm;
                const regex2 = /<div\sclass="vxe-table--empty-block"\sstyle="width: \d+px;"><div class="vxe-table--empty-content">暂无数据<\/div><\/div>/gm;
                // const regex3 = /<div class="vxe-table--border-line"><\/div><div class="vxe-table--resizable-bar" style="padding-bottom: 0px;"><\/div><div class="vxe-loading vxe-table--loading"><div class="vxe-loading--chunk"><i class="vxe-icon-spinner roll vxe-loading--default-icon"><\/i><div class="vxe-loading--text">加载中...<\/div><\/div><\/div>/gm;
                // const regex4 = /<div class="vxe-table--border-line"><\/div><div class="vxe-table--resizable-bar"><\/div><div class="vxe-loading vxe-table--loading"><div class="vxe-loading--chunk"><i class="vxe-icon-spinner roll vxe-loading--default-icon"><\/i><div class="vxe-loading--text">加载中...<\/div><\/div><\/div>/gm;

                // contentHtml = contentHtml.replace(regex1, '');
                // contentHtml = contentHtml.replace(regex2, '');
                // contentHtml = contentHtml.replace(regex3, '');
                // contentHtml = contentHtml.replace(regex4, '');
                $table.print({
        sheetName: '打印表格',
        style: `
.vxe-table, .vxe-table th, .vxe-table td, .vxe-table td {border-color: #000 !important;}
.el-card{
				margin-top:20px;
				box-shadow: 0 0 3px #818181;
				padding: 20px;
				border-radius: 5px;
        font-size: 12px;
			}
      .el-card .el-card__body{
  overflow: hidden; padding: 0px 0px !important;
}
.borderbotom{
  border: 1px solid rgb(122, 122, 122);
  overflow: hidden;
}
`,

        beforePrintMethod: ({content}) => {
          content = contentHtml
          return content
        }
      })
            }
            return{
                ...toRefs(state),
                Load,
                XEUtils,
                isFooterRow,
                moveUp,
                moveDown,
                isFooterTop,
                isFooterinsertEvent,
                isFooterremoveEvent,
                isFootermoveUp,
                handleSelectionChange,
                isFooterSelectionChange,
                removeEvent,
                isFootermoveDown,
                printEvent1,
                handle,
                detailInsertEvent,
                detailRemoveEvent,
                jiangepanduan,
                detailSelectionChange,
                detailRow,
                print,
                printSettings,
                saveSettings,
                insertEvent,
                ft,
                fy,
                tableFt,
                mainTop,
                detailTop,
                detailMoveUp,
                detailMoveDown,
                fts
            }
        }
    }
</script>
<style scoped>
    .el-tabs__item{padding: 0 10px !important;}
.prints .vxe-table,.prints  .vxe-table th,.prints  .vxe-table td,.prints  .vxe-table td {border-color: #000 !important;}

.el-card .el-card__body {
  overflow: hidden;
  padding: 0px 0px !important;
}

.disflex {
  display: flex;
}

.cPrint {
  overflow: auto;
}

.tPrint {
  width: 240px;
  height: calc(100vh - 100px);
  margin-top: 2px;
  background-color: #fff;
  position: relative;
  z-index: 900;
}

.prints .vxe-table--main-wrapper {
  border: 1px solid #000 !important;
}

.prints .vex-cell {
  white-space: pre-line;
  word-break: break-all;
  padding-left: 5px;
  padding-right: 5px;
}

.cardsx .el-card__body {
  overflow: hidden;
}

.borderbotom {
  border: 1px solid rgb(122, 122, 122);
  overflow: hidden;
}
</style>